<template>
  <view>
    <view class="bottom-drawer-mask" v-if="showLuckFood" @click="closeDrawer"></view>
    <view class="bottom-drawer" v-if="showLuckFood">
      <view class="drawer-content custom-drawer-content">
        <!-- 标题行 -->
        <view class="drawer-role-row">
          <image class="drawer-gender-icon2" src="/static/image/clear.png" @click="closeDrawer" />
          <!-- <text class="drawer-role-name">食神</text> -->
        </view>
        <!-- <view class="drawer-ai-tip">
					<image class="drawer-ai-icon" src="/static/stra111.png" />
					<text class="drawer-ai-text">此形象角色由用户使用AI技术生成</text>
				</view> -->

        <!-- 食神内容-->
        <view class="food-luck-content">
          <!-- 加载状态 -->
          <view v-if="isLoading" class="loading-container">
            <view class="loading-animation">
              <view class="loading-spinner"></view>
            </view>
            <view class="loading-text">
              <text class="main-text">您的专属运势食谱大模型正在生成，请稍等</text>
              <!-- <text class="loading-dots">...</text> -->
            </view>
          </view>

          <!-- 正常内容 -->
          <view v-else>
            <!-- 命理档案部分 -->
            <view class="drawer-info-block">
              <view class="drawer-info-header">
                <image class="drawer-info-icon" src="/static/1.png" />
                <text class="drawer-info-title">命理档案</text>
              </view>
              <view class="drawer-info-content">
                <view class="info-row">
                  <text class="info-label">您的命理：</text>
                  <text class="info-value">{{ mldaInfo.mingLi }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">今日天时：</text>
                  <text class="info-value">{{ mldaInfo.tianShi }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">核心建议：</text>
                  <text class="info-value">{{ mldaInfo.jianYi }}</text>
                </view>
              </view>
            </view>

            <!-- 今日运势部分 -->
            <view class="drawer-info-block">
              <view class="drawer-info-header">
                <image class="drawer-info-icon" src="/static/2.png" />
                <text class="drawer-info-title">今日运势</text>
              </view>
              <view class="drawer-info-content">
                <view class="info-row">
                  <text class="info-label">事业：</text>
                  <text class="info-value">{{ jrysInfo.shiYe }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">情感：</text>
                  <text class="info-value">{{ jrysInfo.qingGan }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">财位：</text>
                  <text class="info-value">{{ jrysInfo.caiWei }}</text>
                </view>
              </view>
            </view>

            <!-- 推荐菜品部分 -->
            <view class="drawer-hotdance-block">
              <view class="drawer-hotdance-header">
                <image class="drawer-hotdance-icon" src="/static/3.png" />
                <text class="drawer-hotdance-title">推荐菜品</text>
              </view>
              <view class="food-list">
                <view v-for="(item, index) in recommendedFoods" :key="index" class="food-item">
                  <view class="food-info">
                    <view class="food-name">{{ item.name }}</view>
                    <view class="food-property">
                      <text class="property-value">{{ item.wuxing }}</text>
                    </view>
                    <view class="food-property">
                      <text class="property-value">{{ item.benefit }}</text>
                    </view>
                    <view class="food-property">
                      <text class="property-value">{{ item.season }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 能量增幅 -->
            <view class="drawer-info-block">
              <view class="drawer-info-header">
                <image class="drawer-info-icon" src="/static/power-updata.png" />
                <text class="drawer-info-title">能量增幅</text>
              </view>
              <view class="drawer-info-content energy-content">
                <view v-for="(item, index) in luckInfo" :key="index" class="info-row energy-row">
                  <text class="info-label">{{ item.name }}：</text>
                  <text class="info-value info-vale-color">+{{ item.value }}%</text>
                </view>
              </view>
            </view>
          </view>

        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showLuckFood: {
      type: Boolean,
      default: false,
    },
    foodLuckData: {
      type: Object,
      default: () => null
    }
  },
  computed: {
    // 命理档案数据
    mldaInfo() {
      if (!this.foodLuckData || !this.foodLuckData.mlda || this.foodLuckData.mlda.length < 3) {
        return {
          mingLi: '测试数据',
          tianShi: '测试数据',
          jianYi: '测试数据'
        };
      }
      return {
        mingLi: this.foodLuckData.mlda[0],
        tianShi: this.foodLuckData.mlda[1],
        jianYi: this.foodLuckData.mlda[2]
      };
    },
    // 今日运势数据
    jrysInfo() {
      if (!this.foodLuckData || !this.foodLuckData.jrys || this.foodLuckData.jrys.length < 3) {
        return {
          shiYe: '测试数据',
          qingGan: '测试数据',
          caiWei: '测试数据'
        };
      }
      return {
        shiYe: this.foodLuckData.jrys[0],
        qingGan: this.foodLuckData.jrys[1],
        caiWei: this.foodLuckData.jrys[2]
      };
    },
    // 推荐菜品数据
    recommendedFoods() {
      if (!this.foodLuckData || !this.foodLuckData.tjcp || this.foodLuckData.tjcp.length === 0) {
        return [
          {
            name: '测试菜品1',
            wuxing: '五行属性',
            benefit: '补益效果',
            season: '适宜节气'
          },
          {
            name: '测试菜品2',
            wuxing: '五行属性',
            benefit: '补益效果',
            season: '适宜节气'
          }
        ];
      }
      return this.foodLuckData.tjcp.map(item => {
        return {
          name: item.name || '推荐菜品',
          wuxing: item.wx || '五行属性',
          benefit: item.by || '补益效果',
          season: item.jq || '适宜节气'
        };
      });
    },
    // 能量增幅数据 - 使用luck数组
    luckInfo() {
      if (!this.foodLuckData || !this.foodLuckData.luck || this.foodLuckData.luck.length === 0) {
        return [
          {
            name: '事业运',
            value: '30'
          },
          {
            name: '贵人缘',
            value: '25'
          }
        ];
      }
      return this.foodLuckData.luck.map(item => {
        return {
          name: item.name || '运势',
          value: item.value || '0'
        };
      });
    },
    // 是否显示加载状态
    isLoading() {
      // 当弹窗显示但是没有完整的真实数据时显示加载状态
      // 排除测试数据的情况
      if (!this.showLuckFood || !this.foodLuckData) {
        return this.showLuckFood; // 弹窗显示但没有任何数据时加载
      }
      
      // 检查是否有真实的非测试数据
      const hasRealMlda = this.foodLuckData.mlda && this.foodLuckData.mlda.length > 0 && 
        this.foodLuckData.mlda[0] !== '测试数据';
      const hasRealJrys = this.foodLuckData.jrys && this.foodLuckData.jrys.length > 0 && 
        this.foodLuckData.jrys[0] !== '测试数据';
      const hasRealTjcp = this.foodLuckData.tjcp && this.foodLuckData.tjcp.length > 0 && 
        this.foodLuckData.tjcp[0].name !== '测试菜品1' && this.foodLuckData.tjcp[0].name !== '测试菜品2';
      
      // 如果三个主要数据都没有真实数据，则显示加载状态
      return !(hasRealMlda && hasRealJrys && hasRealTjcp);
    }
  },
  methods: {
    closeDrawer() {
      this.$emit("update:showLuckFood", false);
      this.$emit("resetFoodLuckActive");
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-drawer-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
}

.bottom-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent;
  display: flex;
  justify-content: center;
  animation: drawerUp 0.3s;
}

.drawer-content {
  width: 100vw;
  max-width: 750rpx;
  background: #000000;
  border-top-left-radius: 38rpx;
  border-top-right-radius: 38rpx;
  padding-bottom: env(safe-area-inset-bottom);
  animation: drawerContentUp 0.3s;
}

@keyframes drawerUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes drawerContentUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.custom-drawer-content {
  background: #000;
  border-radius: 32rpx 32rpx 0 0;
  display: flex;
  flex-direction: column;
  padding: 46rpx 23rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.drawer-role-row {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  justify-content: flex-end;
}

.drawer-gender-icon2 {
  width: 38.46rpx;
  height: 38.46rpx;
}

.drawer-role-name {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 18rpx;
}

.drawer-ai-tip {
  width: 432.69rpx;
  height: 69.23rpx;
  display: flex;
  align-items: center;
  background: url("/static/bg1111.png") no-repeat center center;
  background-size: cover;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.drawer-ai-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}

.drawer-ai-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 23rpx;
  font-weight: 400;
}

/* AI食谱生成中提示样式 */
.ai-generating-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 30rpx;

  .generating-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 60rpx;

    text {
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      line-height: 1.2;
    }

    .highlight-text {
      color: #2263EC;
      font-weight: 600;
      margin: 0;
    }

    .dots {
      color: #666;
      font-size: 28rpx;
      animation: blink 1.5s infinite;
      margin-top: 8rpx;
    }
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* 信息区块样式 */
.drawer-info-block {
  background: #232323;
  border-radius: 18rpx;
  padding: 32rpx 30rpx;
  width: 100%;
  margin-bottom: 23rpx;
  display: flex;
  flex-direction: column;
}

.drawer-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.drawer-info-icon {
  width: 46rpx;
  height: 46rpx;
  margin-right: 12rpx;
}

.drawer-info-title {
  color: #bfc2c7;
  font-size: 30rpx;
  font-weight: bold;
}

.drawer-info-content {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #bfc2c7;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #fff;
  flex: 1;
}

.info-vale-color {
  color: #2263EC;
  font-weight: 600;
}

/* 能量增幅横向布局 */
.energy-content {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 40rpx;
}

.energy-row {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
  margin-right: 0;
}

/* 推荐菜品样式 */
.drawer-hotdance-block {
  background: #232323;
  border-radius: 18rpx;
  padding: 32rpx 30rpx 28rpx 30rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 11px;
}

.drawer-hotdance-header {
  display: flex;
  align-items: center;
  // margin-bottom: 18rpx;
}

.drawer-hotdance-icon {
  width: 46rpx;
  height: 46rpx;
  margin-right: 12rpx;
}

.drawer-hotdance-title {
  color: #bfc2c7;
  font-size: 30rpx;
  font-weight: bold;
}

.food-list {
  display: flex;
  flex-direction: column;
}

.food-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #333;
}

.food-item:last-child {
  border-bottom: none;
}

.food-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.food-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8rpx;
}

.food-property {
  font-size: 26rpx;
  color: #bfc2c7;
  margin-bottom: 6rpx;
  display: flex;
}

.property-value {
  flex: 1;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  min-height: 400rpx;
}

.loading-animation {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 4rpx solid rgba(34, 99, 236, 0.2);
  border-left-color: #2263EC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 12rpx;
  letter-spacing: 1rpx;
}

.sub-text {
  font-size: 28rpx;
  color: #bfc2c7;
  margin-bottom: 8rpx;
}

.loading-dots {
  color: #2263EC;
  font-size: 40rpx;
  font-weight: bold;
  animation: blink 1.5s infinite;
  margin-top: 8rpx;
}

@keyframes blink {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.no-data-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  padding: 40rpx;
}

.no-data-text {
  text-align: center;
  width: 300rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 40rpx;
}

.no-data-btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 231rpx;
  height: 74rpx;
  border-radius: 61rpx 61rpx 61rpx 61rpx;
  border: 2rpx solid #2263EC;
  font-weight: 500;
  font-size: 30rpx;
  color: #2263EC;
}
</style>